<template>
  <div>
    <div class="pic">
      <div class="pic filter"></div>
      <div class="tags">
        <h3>
          标题：{{ messageData.title }}
          <el-tooltip
            effect="light"
            content="文章点击情况"
            placement="top-start"
          >
            <el-button
              round
              class="analysis"
              icon="el-icon-data-line"
              @click="showDialog"
            ></el-button>
          </el-tooltip>
        </h3>
        <p>Published on 2021-2-20 8:34 by admin 来源：原创</p>
        <div class="sort">
          <span>分类：</span>
          <el-button round size="mini" class="choosed">HTML</el-button>
        </div>
      </div>
    </div>
    <div class="box">
      <!-- 文章内容 -->
      <pre class="content">{{ messageData.content }}</pre>
      <!-- 关键词 -->
      <div class="tags">
        <span>关键词：</span>
        <el-tag v-for="(tag, index) in tags" :key="index" type="success">
          {{ tag }}
        </el-tag>
      </div>
      <div class="attr">
        <span>是否推荐：<i class="el-icon-success"></i></span>
        <span>是否首页：<i class="el-icon-success"></i></span>

        <!-- <span><i class="el-icon-view"></i>阅读量：</span> -->
      </div>
    </div>
    <!-- 对话框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div>
        <el-tabs v-model="activeName" @tab-click="changeChart()">
          <el-tab-pane label="点击量" name="first">
            <div id="lineForClick" style="width； 600px;height: 400px"></div>
          </el-tab-pane>
          <el-tab-pane label="评论数" name="second">
            <div id="lineForReview" style="width； 600px;height: 400px"></div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <span slot="footer">
        <el-button @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts";
export default {
  data() {
    return {
      messageData: {},
      tags: [],
      dialogVisible: false,
      activeName: "first",
    };
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
      setTimeout(() => {
        if (this.dialogVisible) {
          var readChart = echarts.init(document.querySelector("#lineForClick"));
          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            xAxis: {
              type: "category",
              data: ["前日", "昨日", "今日"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [820, 932, 901],
                type: "line",
              },
            ],
          };
          readChart.setOption(option);
        }
      }, 1000);
    },
    changeChart() {
      if (this.activeName === "first") {
        setTimeout(() => {
          if (this.dialogVisible) {
            var readChart = echarts.init(
              document.querySelector("#lineForClick")
            );
            var option = {
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  label: {
                    backgroundColor: "#6a7985",
                  },
                },
              },
              xAxis: {
                type: "category",
                data: ["前日", "昨日", "今日"],
              },
              yAxis: {
                type: "value",
              },
              series: [
                {
                  data: [820, 932, 901],
                  type: "line",
                },
              ],
            };
            readChart.setOption(option);
          }
        }, 1000);
      } else {
          setTimeout(() => {
        if (this.dialogVisible) {
          // echarts图表渲染
          var readChart = echarts.init(document.querySelector("#lineForReview"));
          var option = {
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                label: {
                  backgroundColor: "#6a7985",
                },
              },
            },
            xAxis: {
              type: "category",
              data: ["前日", "昨日", "今日"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                data: [109, 52, 41],
                type: "line",
              },
            ],
          };
          readChart.setOption(option);
        }
      }, 1000);
      }
    },
  },
  created() {
    this.messageData = this.$route.query.data;
    this.tags = this.messageData.keyWords.split(" ");
    // console.log(this.$route)
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.pic {
  width: 100%;
  height: 300px;
  background-image: url(../../assets/Supervise/pic.jpg);
  background-position: center;
  background-size: cover;
  position: relative;
  transition: all 0.2s linear;
  .tags {
    width: 650px;
    position: absolute;
    top: 30%;
    left: 30%;
    h3 {
      color: white;
      margin-bottom: 15px;
      font-weight: 500;
    }
    .analysis {
      background-color: transparent;
      color: white;
      font-size: 20px;
      border: 0;
    }
    p {
      font-size: 12px;
      color: white;
      line-height: 30px;
    }

    span {
      color: white;
      font-size: 12px;
    }
    .choosed {
      background-color: rgb(125, 172, 241);
      color: #fff;
    }
    .sort {
      margin-top: 20px;
      .el-button::before {
        content: "#";
        padding-right: 3px;
      }
    }
  }
}
.filter::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.filter:hover {
  filter: blur(3px);
  transition: all 0.2s linear;
}
.box {
  width: 800px;
  margin: 0 auto;
  .content {
    font-size: 16px;
    line-height: 30px;
    margin-top: 30px;
    white-space: pre-wrap;
  }
  .tags {
    margin-top: 30px;
  }
  span {
    font-weight: 800;
  }
  .el-tag {
    margin: 0 20px;
  }
  .attr {
    span {
      display: inline-block;
      margin-right: 50px;
      margin-top: 50px;
    }
    i {
      color: #2175bc;
    }
  }
}
</style>